<template>
    <div class="vue-body" >
        <!-- 搜索条件, 按钮 放在一行 -->
        <div class="btn-header">
            <!-- 搜索条件 -->
            <div>
                <el-input style="width: 200px; margin-right: 5px;" placeholder="请输入用户名" suffix-icon="el-icon-search"
                          v-model="params.name"></el-input>
                <el-input style="width: 200px; margin-right: 5px;" placeholder="请输入昵称" suffix-icon="el-icon-position"
                          v-model="params.nickname"></el-input>
                <el-input style="width: 200px; margin-right: 5px;" placeholder="请输入角色" suffix-icon="el-icon-message"
                          v-model="params.name"></el-input>
                <el-button type="primary" @click="load">搜索</el-button>
            </div>
        </div>
        
        <!-- 列表查询 -->
        <el-table :data="list" border stripe :header-cell-class-name="headerBg" v-loading="loading">
            <el-table-column type="selection" label="全选" width="40" fixed="left"></el-table-column>
            <el-table-column prop="name" label="图书名称" width="100" align="center"></el-table-column>
            <el-table-column prop="author" label="作者" width="100" align="center"></el-table-column>
            <el-table-column prop="workTime" label="著作日期" width="100" align="center"></el-table-column>
            <el-table-column prop="sales" label="销量（册）" width="100" align="center"></el-table-column>
            <el-table-column prop="stock" label="库存（册）" width="100" align="center"></el-table-column>
            <el-table-column prop="createTime" label="创建时间" width="160" align="center"></el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button type="success" size="mini">编辑 <i class="el-icon-edit"></i></el-button>
                    <el-button type="danger" size="mini">移除 <i class="el-icon-remove-outline"></i></el-button>
                </template>
            </el-table-column>
        </el-table>
        
        <!-- 分页查询 -->
        <div style="padding: 10px 0; text-align: left;">
            <el-pagination
                 @size-change="handleSizeChange"
                 @current-change="handleCurrentChange"
                 :current-page="pageNum"
                 :page-sizes="[5, 10, 20, 50]"
                 :page-size="pageSize"
                 layout="total, sizes, prev, pager, next, ->,  jumper"
                 :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import {page} from "@/api/monitor/activeUser";

export default {
    name: "activeUser",
    data() {
        return {
            list: [],
            params: {},
            pageNum: 1,
            pageSize: 10,
            loading: false,
            headerBg: 'headerBg',
            total: 0, // 总数
            allSelect: false, // 全选
            selectedList: [], // 已选中数据
        };
    },
    methods: {
        handleSizeChange(pageSize) {
            this.pageSize = pageSize;
            this.load()
        },
        handleCurrentChange(pageNum) {
            console.log(pageNum)
            this.pageNum = pageNum
            this.load()
        },
        load() {
            this.loading = true;
            page(this.pageNum, this.pageSize, this.params).then(res => {
                this.list = res.data.records
                this.total = res.data.total
                this.loading = false
            }).catch(() => this.loading = false)
        },
    },
    async mounted() {
        this.load()
    },
}
</script>

<style scoped>

</style>
